<template>
	<div>
		<div v-loading.fullscreen.lock="Loading" class="columnnav">
			<div class="left paddingtop10 coresnav">
				<el-breadcrumb separator-icon="ArrowRight">
					<el-breadcrumb-item :to="{ path: '/' }">首页 </el-breadcrumb-item>
					<el-breadcrumb-item v-for="(item, index) in nav" :key="index" :to="{ path: '/course/' + item.alias }">{{ item.name }}</el-breadcrumb-item>
				</el-breadcrumb>
			</div>
		</div>
		<div class="columnnav paddingtop10">
			<!-- 播放 -->
			<Aliplayer v-if="medium || Whethertobuy" :medium="medium" @custom-ended="ended"></Aliplayer>
			<!-- 课程信息 没有购买才显示这个页面  否则直接显示视频就可以了 -->
			<div v-else class="Genericpadding"><information v-if="courseinfo" :courseinfo="courseinfo" :Whethertobuy="Whethertobuy" @verifycourse="verifycourse" @custom-event="switch_tab"></information></div>
		</div>
		<div class="main">
			<div class="coursemain">
				<div class="content coresinfo">
					<div class="Genericpadding">
						<el-tabs v-model="activeName" type="card" class="cortabs">
							<el-tab-pane label="课程介绍" name="introduce"><coresonly :content="content"></coresonly></el-tab-pane>
							<el-tab-pane label="课程目录" name="Tableofcontents"><CourseCatalog v-if="data" :data="data" :next="next" @custom-event="Receive_medium"></CourseCatalog></el-tab-pane>
							<el-tab-pane label="相关课件" name="courseware"><courseware v-if="data" :data="data"></courseware></el-tab-pane>
						</el-tabs>
					</div>
				</div>
			</div>
			<div class="left">
				<Instructorlist v-if="courseinfo.lecturer" :Instructorlist="courseinfo.lecturer"></Instructorlist>
			</div>
		</div>
	</div>
</template>

<script>
	import { ref, onMounted, watch } from 'vue'
	import { mapState } from 'vuex'
	import Instructorlist from '@/components/Instructorlist'
	import information from '@/components/information'
	import coresonly from '@/components/coresonly'
	import CourseCatalog from '@/components/CourseCatalog'
	import courseware from '@/components/courseware'
	import Aliplayer from '@/components/Aliplayer'
	import { dataRequest as api } from '@/api/api'
	export default {
		name: 'name',
		computed: {
			...mapState(['user']),
		},
		components: {
			// 组件
			Instructorlist,
			information,
			coresonly,
			CourseCatalog,
			courseware,
			Aliplayer,
		},
		data() {
			return {
				Loading: false,
				nav: [],
				data: '',
				courseid: this.$route.params.courseid,
				activeName: 'introduce',
				next: 1,
				medium: '',
				content: '',
				// 课程信息
				courseinfo: '',
				Whethertobuy: false,
			}
		},
		methods: {
			async get() {
				this.Loading = true
				let arr = await api(['Coursecontent', this.courseid])
				console.log(arr)
				if (arr.code == 200) {
					this.courseinfo = arr.data
					this.content = arr.data.content
					this.data = arr.data.course
				}

				// 获取导航:comn
				let nav = await api(['Courselevel', this.$route.params.comn])

				if (nav.code == 200) {
					nav = nav.data.nav
					// console.log(nav)
					nav.unshift({ id: '0', name: '全部课程', alias: '', pid: '0', level: '0' })
					nav.push({ id: '0', name: '详情', alias: '', pid: '0', level: '0' })
					// console.log(nav)
					this.nav = nav
				}
				this.Loading = false
			},

			async verifycourse() {
				if (this.user) {
					let arr = await api(['Verifycoursepurchased', this.courseid])
					if (arr.code == 200) {
						this.Whethertobuy = true
						this.activeName = 'Tableofcontents'
					}
				}
				this.get()
			},
			async switch_tab(ele) {
				console.log('切换目录')
				this.activeName = ele
				window.scrollTo({ behavior: 'instant', top: 400 })
			},
			async Receive_medium(data) {
				console.log(data)
				// 获取播放地址
				let arr = await api(['initVodClient', data])
				console.log(arr)
				if (arr.code == 200) {
					this.medium = arr.data
				} else {
					this.$message.error(arr.data)
				}
			},
			ended() {
				console.log('播放完毕')
				this.next++
			},
		},

		mounted() {
			// 生命周期:
			window.scrollTo({ behavior: 'instant', top: 0 })

			this.verifycourse()
		},
		updated() {
			// this.loading = false
		},
		watch: {
			user(newMedium, old) {
				if (newMedium) {
					this.verifycourse()
				}
				// 在 medium 属性发生变化时重新初始化播放器
			},
		},
	}
</script>
<style>
	.cortabs .is-top {
		font-size: 17px !important;
		font-weight: bold !important;
	}
	.coresnav .el-breadcrumb__inner {
		color: inherit;
		font-weight: inherit;
	}
</style>
<style scoped>
	.coresinfo {
		min-height: 100%;
	}
	.coresnav span {
		font-size: 12px;
		color: #606266 !important;
	}
	.paddingtop10 {
		padding-top: 20px;
	}
	@media screen and (max-width: 860px) {
		.coursemain {
			width: 100vw;
		}
		.paddingtop10 {
			padding-top: 0;
		}
	}
</style>
<!-- 先生成订单号  然后传递订单号给弹窗  弹窗按照订单号进行 查询(购买的什么产品 标题 数量 价格)价格和支付 -->
<!-- 根据订单号表就可以判断用户是否购买了这个产品   -->
